<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="autocomplete/jquery.autocomplete.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#empCode").autocomplete("employee_data.jsp", {
				cellSeparator: "|",
				lineSeparator: "\n",
				minChars: 1,
				maxItemsToShow: 10,
				formatItem: function(row) {
					//alert(row[0] + ", " + row[1] + "," + row[2] + ", " + row[3]);
					return "员工代码->" + row[0] + " 姓名->" + row[1] + " 年龄->" + row[2] + " 机构->" + row[3];
				},
				onItemSelect: function(li) {
					$("#empName").val(li.extra[0]);
					$("#age").val(li.extra[1]);
					$("#orgName").val(li.extra[2]);
				}
			});
		});
	</script>
  </head>
  	
  <body>
    员工代码：<input type="text" name="empCode" id="empCode" size="70"><br>
    姓名：<input type="text" name="empName" id="empName" readonly="readonly"><br>
    年龄：<input type="text" name="age" id="age" readonly="readonly"><br>
    部门：<input type="text" name="orgName" id="orgName" readonly="readonly"><br>
  </body>
</html>
